<!DOCTYPE HTML>
<html>
<head>
    {include file="Public/header"/}
    <title>幻灯片管理</title>
    <style type="text/css">
        ul.pic_list{
            width: 100%;
            height: 200px;
        }
        ul.pic_list>li{
            position: relative;
            float: left;
            width:17.7%;
            margin: 1%;
            border: solid 1px #c5c5c5;
        }
        ul.pic_list>li>a,
        ul.pic_list>li a img{
            width:100%;
            height:160px;
        }
        ul.pic_list>li>a:hover{
            font-weight: 600;
            text-decoration: none;
        }
        div.pic_operation{
            width:100%;
            height: 27px;
            margin-top: -52px;
            text-align: center;
            z-index: 99999;
            position:absolute;
            background: rgba(99, 98, 98, 0.8);
        }
        div.pic_operation ul li{
            float: left;
            margin: 3%;
            width: 27%;
        }
        div.pic_operation ul li a {
            color: #f5f5f5;
        }
        div.tab-scro{
            height: 430px;
            overflow-y: scroll;
            border: solid 1px #ddd;
            border-top: 0;
            border-right: 0;
        }

        /* 设置滚动条的样式 */
        ::-webkit-scrollbar {
            width: 1px;
            height: 1px;
        }
        /* 滚动槽 */
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px #ddd;
            border-radius: 2px;
        }
        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            border-radius: 2px;
            background: rgba(0,0,0,0.1);
            -webkit-box-shadow: inset 0 0 6px #ddd;
        }
        ::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(129,211,184,0.4);
        }
        div.tab-scro table{
            border-top: 0;
            border-right: 0;

        }
        div.tab-scro table tr td{
            border-left: 0;
            border-right: 0;
        }
        div.tab-scro table tr td a:hover{
            color: #333333;
            background-color: #bddef5;;
        }
        div.pic-name{
            background-color: #bddef5;
            height: 25px;
            line-height: 25px;
        }
        div.add-pic{
            width: 416px;
            margin: 5px;
        }

        span.noimg{
            width: 150px;
            height: 110px;
            display: block;
            margin-top: 24%;
            margin-left: 13%;
            font-size: 16px;
            color: #666;
        }

        .mybtn{
            margin: 3px;
        }

        div.slide_div{
            width: 100%;
            height: 150px;
            overflow: hidden;
            margin-left: 2%;
        }
        div.slide_div img{
            width: 95%;
            border-radius: 4px 4px 0 0;
        }
    </style>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>
    首页
    <span class="c-gray en">&gt;</span>
    系统设置
    <span class="c-gray en">&gt;</span>
    浏览幻灯片
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>
<div class="page-container">
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <strong style="line-height:30px; margin-left: 5px;">
                <i class="Hui-iconfont">&#xe646;</i>
                {$slideGroup['title']}
            </strong>
        </span>
		<span class="r">
             <a class="btn btn-primary radius" href="javascript:;" onclick="slide_add('新增幻灯片','slideadd?group_id={$slideGroup['id']}','100%')">
                 <i class="Hui-iconfont">&#xe600;</i>
                 新增幻灯片
             </a>
             <a class="btn btn-primary radius" href="{:url('slideGroupList')}">
                 <i class="Hui-iconfont">&#xe66b;</i>
                 返回分组
             </a>
		</span>
    </div>

    <div class="mt-20">
        <form id="sortForm">
        <table class="table table-border table-bordered table-bg sorting_desc table-sort">
            <!--<thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" value="" name=""></th>
                <th width="40">ID</th>
                <th width="80">标题</th>
                <th>图片个数</th>
                <th width="70">操作</th>
            </tr>
            </thead>-->
            <tbody>
            {volist name="$slide" id="vo"}
                <tr>
                    <td width="95%">
                        <div class="row cl">
                            <input type="hidden" name="sort[{$vo.id}]" value="{$vo.id}">
                            <div class="slide_div">
                                <img onclick="picSee()" src="{$vo.image|substr=1}">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="row cl">
                        <div class="formControls col-xs-2 col-sm-2">
                            <span>
                            <a href="javascript:;" class="btn radius mybtn slide_up" title="上移"><i class="Hui-iconfont"></i></a>
                            <a href="javascript:;" class="btn radius mybtn slide_down" title="下移"><i class="Hui-iconfont"></i></a>
                            <a href="javascript:;" onclick="slide_edit('编辑幻灯片','slideedit?id={$vo.id}')" class="btn radius mybtn slide_edit" title="编辑"><i class="Hui-iconfont"></i></a>
                            <a href="javascript:;" onclick="slide_del({$vo.id},this)" class="btn radius mybtn slide_del" title="删除"><i class="Hui-iconfont"></i></a>
                            </span>
                        </div>
                        </div>
                    </td>
                </tr>
            {/volist}
            </tbody>
        </table>
        </form>
    </div>
</div>

{include file="Public/footer" /}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/Hui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    btn_disabled();
    function btn_disabled() {
        $("tbody tr:first").find('.slide_up').addClass('disabled');
        $("tbody tr:last").find('.slide_down').addClass('disabled');
    }
    function sort() {
        $('input[name*=sort]').each(function(index, obj) { $(this).val(index + 1); });
        var formData = $('#sortForm').serialize();
        $.post('{:url("slideSort")}',formData,function (result) {
            if(result.code){
                layer.msg('排序成功',{icon:1,time:800});
            }else {
                layer.msg('排序失败',{icon:2,time:2000});
            }
        })
    }
    $(function () {
        $(".slide_up").click(function(){
            $('.slide_up,.slide_down').removeClass('disabled');
            var li = $(this).parents("tr");
            var index =$(this).parents("tr").index();
            if(index != 0){
                var $shang = $(this).parents("tr").prev(); //相邻的前一个同级元素
                li.after($shang)
            }
            btn_disabled();
            sort();
        });
        $(".slide_down").click(function(){
            $('.slide_up,.slide_down').removeClass('disabled');
            var len = $(this).parents("tbody").find('tr').length;
            var li = $(this).parents("tr");
            var index =$(this).parents("tr").index();
            if(index < len){
                var $shang = $(this).parents("tr").next(); //相邻的下一个同级元素
                li.before($shang)
            }
            btn_disabled();
            sort();
        });
    });
   /* $('.table-sort').dataTable({
        "createdRow": function( row, data, dataIndex ) {
            $(row).addClass( 'text-c' );
        },
        stateSave:true,  //状态保存
        serverSide:true, //服务器模式
        processing:true, //打印信息字符信息
        paging    :true, // 开启本地分页
        searching :true, //开启搜索
        lengthMenu:[10,20,30,40,100,150,300], //左上角select选项
        ajax: {
            "url":"",
            "data":function(d){    //额外传递的参数
            }
        },
        aoColumns:[
            {
                data : "",
                "render" : function(full,type,data){
                    if(data){
                        view = '<ul class="pic_list">';
                        $.each(data,function(k,v){
                            //var slideurl = "{:url('')}";
                            var slideurl = "";
                            var img = v.image == ''?'<span class="noimg"><i class="Hui-iconfont"></i>待添加</span>':'<img class="displayImg" src="'+ v.image +'" height="150" width="170"/>';
                            view += '<li>' +
                                '<a href="">'+ img +'</a>' +
                                '<div class="pic-name">' +
                                '<label for="checked'+ v.id +'">' +
//                                '<input id="checked'+ v.id +'" class="checkbox" value="'+ v.id +'" type="checkbox">' +
                                '<span>'+ v.title +'</span></label>' +
                                '</div>' +
                                '<div class="pic_operation"><ul>' +
                                '<li><a href="javascript:;" onclick="groupNameEdit(\''+v.title+'\','+v.id+');" title="重命名">重命名</a></li>' +
                                '<li><a href="javascript:;" onclick="slide_group_edit(\'编辑幻灯片\',\'slide.html?id='+v.id+'\')" title="编辑">编辑</a></li>' +
                                '<li><a href="javascript:;" onclick="slide_group_del('+v.id+',this);" data-id="'+ v.id +'" data-oristatus="0" title="删除">删除</a></li>' +
                                '</ul></div>' +
                                '</li>';
                        });
                        return	view +='</ul>';
                    }
                }
            }
        ]
    });*/

    function slide_add(title,url){
        layer_show(title,url);
    }

    function slide_edit(title,url){
        layer_show(title,url);
    }

    var slideDel = "{:url('slideDel')}";
    function slide_del(id,obj){
        layer.confirm('分组删除须谨慎，确认要删除吗？',function(index){
            $.ajax({
                type: 'POST',
                url: slideDel,
                data:{id : id},
                dataType: 'json',
                success: function(data){
                    if(data.code){
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!',{icon:1,time:1000},function () {
                            location.reload();
                        });
                    }else {
                        layer.msg(data.msg,{icon:5});
                    }
                },error:function() {
                    layer.msg('操作失败',{icon:5});
                }
            });
        });
    }

    /* 修改分组名 */
    function groupNameEdit(name,id){
        var url = '{:url("slidegroupedit")}';
        layer.ready(function () {
            layer.prompt({
                minlength: 0,
                formType: 2,
                value: name,
                title: '设置分组名'
            }, function(value, index){
                if (name != value) {
                    //setChange(id, 'name', value, url);
                    $.post(url, {'id':id,'title':value},function (data) {
                        if (data.code) {
                            layer.msg(data.msg, { icon: 1, time: 1500},function () {
                                    window.location.reload();
                                }
                            );
                        } else {
                            layer.msg(data.msg, { icon: 5, time: 1500});
                        }
                    });
                }
                layer.close(index);
            });
        });
    }

    /* 相册层 */
    function picSee() {
        layer.photos({
            photos: '.slide_div',
            shift: 5
        });
    }
</script>
</body>
</html>